<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>P标签</p>
		<ul>
			<li>第一行</li>
			<li>第二行</li>
			<li>第三行</li>
		</ul>
		<ol id="1">
			<li>第一行有序</li>
			<li>第二行</li>
			<li>第三行</li>
		</ol>
		<div class="box">123</div>
		<div class="box">123</div>
		<div id="nav">
			<ul>
				<li>首页</li>
				<li>产品</li>
			</ul>
		</div>
			
		<script>
			//获取的要么是元素，要么是元素的集合（伪数组）
			
			
			//通过标签名获取getElementsByTagName
			var lis = document.getElementsByTagName("li");
				console.log(lis[0]);
			
			//通过标签名缩小范围获取getElementsByTagName
			var ols = document.getElementsByTagName("ol");
				console.log(ols[0].getElementsByTagName("li")); 
				
			//通过id名获取getElementById
			var ols = document.getElementById("1");
				console.log(ols);
				
			//通过类名获取getElementsByClassName
			var divs = document.getElementsByClassName("box");
				console.log(divs);
			
			//显示getElementsByTagName
			var ps = document.getElementsByTagName("p");
			document.write(ps.ineerHTML);
			
			//document.querySelector（‘选择器’）不再区分类、id、标签
			var boxs = document.querySelector('.box');//选择类名前面需要加点"."
			console.log(boxs);//返回了第一个元素
			
			var boxs = document.querySelectorAll('.box');
			console.log(boxs);//返回了全部元素
			
			var lis = document.querySelector('li');
			console.log(lis);//返回了第一个列表项
			var lis = document.querySelectorAll('li');
			console.log(lis);//返回了所有列表项
			
			//console。dir
			console.dir(lis)//返回元素名
			
			
			//获取特殊元素
			//获取body元素
			var bodys = document.body;
			console.log(bodys);
			//获取html元素
			var htmls = document.documentElement;
			console.log(htmls);
			
			//事件操作：生成动态页面，事件可以被js侦测晚点行为
			//获取事件原、绑定事件类型、添加事件处理类型
		</script>
		<button>唐伯虎</button>
		<div class="2">选我</div>
		<script>
			var btn = document.querySelector("button");
			btn.onclick=function(){
				alert("点秋香");
			}
			
		//练习：有一个div标签，文本叫选我，点击后输出我被选中了。
			var divs = document.querySelector("div");
			divs.onclick=function(){
				alert("我被选中了");
			}
		//练习：点击按钮，div里面的文字发生变化，变为显示时间2022-12-20
		
		</script>
	</body>
</html>